<script setup>
import { ref, provide } from 'vue'
import ItemRendererGroup from './controls/ItemRendererGroup.vue'

const formData = defineModel("formData", {
    type: Object,
    default: {
        controls: [],
        props: {
            labelPosition: "right",
            labelWidth: 100,
            size: "default",
            cols: 12,
        }
    },
    required: true,
})
const uploadOptions = defineModel("uploadOptions", {
    type: Object,
    default: {
        action: '',
        getHeaders: () => ({}),
        getFileHook: (response, file) => ({ name: file, url: response.url })
    }
})
const formModel = defineModel("formModel", {
    type: Object,
    default: {},
    required: true,
})
provide('uploadOptions', uploadOptions.value)
provide('formProps', formData.value.props)

let form = ref(null);
//验证，回调传入是否验证成功
function validate(callback) {
    console.log('props.formData:', formData.value)
    console.log('props.formModel', formModel.value)
    form.value.validate(callback);
}
function resetFields() {
    form.value.resetFields();
}
function clearValidate(ps) {
    form.value.clearValidate(ps);
}
function scrollToField(prop) {
    form.value.scrollToField(prop)
}

defineExpose({
    validate,
    resetFields,
    scrollToField,
    clearValidate
});

</script>

<template>
    <el-form ref="form" class="epdf-form-renderer" :label-position="formData.props.labelPosition"
        :label-width="formData.props.labelWidth" :size="formData.props.size" :model="formModel" :status-icon="false">
        <ItemRendererGroup :controls="formData.controls" :uploadOptions="uploadOptions" :formModel="formModel">
        </ItemRendererGroup>
    </el-form>
</template>

<style lang="scss" scoped>
.epdf-form-renderer {
    @apply flex flex-wrap overflow-y-auto content-start;
}
</style>
